<template>
  <div class="top-list-item">
    <loader v-if="!featureList"></loader>
    <div v-else>
      <div class="item">
        <p class="title">云音乐特色榜</p>
        <div
          class="info"
          v-for="(item,index) in featureList"
          :key="index"
          :class="{active: item.id == currentId}"
          @click="itemClick(item.id,index)"
        >
          <img :src="item.coverImgUrl" :alt="item.name" />
          <div class="name">
            <p>{{item.name}}</p>
            <p>{{item.updateFrequency}}</p>
          </div>
        </div>
      </div>
      <div class="item">
        <p class="title">全球媒体榜</p>
        <div
          class="info"
          v-for="(item,index) in globalList"
          :key="index"
          :class="{active: item.id == currentId}"
          @click="itemClick(item.id,index+4)"
        >
          <img :src="item.coverImgUrl" :alt="item.name" />
          <div class="name">
            <p>{{item.name}}</p>
            <p>{{item.updateFrequency}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { _topList } from '@/network/discover'

import Loader from '@/components/common/loader/Loader'

export default {
  components: {
    Loader
  },
  data() {
    return {
      currentId: 0,
      topList: null,
      featureList: null,
      globalList: null
    }
  },
  created() {
    _topList().then(res => {              // 获取排行榜种类列表
      this.topList = res.list
      this.featureList = this.topList.slice(0, 4)   //取出前四个排行榜
      this.globalList = this.topList.slice(4)       //取出后面的排行榜
      //设置默认点亮的标签的id
      if (this.$route.query.id) {
        this.currentId = this.$route.query.id
      } else {
        this.currentId = this.topList[0].id
      }
    })
  },
  methods: {
    itemClick(id, index) {
      this.currentId = id   //修改点亮标签的ID
      // 实现路由跳转
      this.$router.push({
        path: '/discover/toplist',
        query: {
          id
        }
      })
      this.$bus.$emit('itemClick', { id, index })
      this.$emit('itemClick', index)
    }
  }
}
</script>

<style scoped>
.top-list-item {
  width: 240px;
  font-size: 12px;
  color: #fff;
  border: 1px solid #666;
  border-top: none;
  border-bottom: none;
}
/* 排行榜标题 */
.title {
  margin: 30px 15px;
  font-size: 16px;
  font-weight: 700;
}

/* 每条排行榜信息 */
.info {
  cursor: pointer;
  display: flex;
  padding: 10px;
}
.info img {
  width: 40px;
  height: 40px;
}
.info .name p {
  margin-left: 10px;
  height: 20px;
  line-height: 20px;
}
.info .name p:nth-child(2) {
  color: #bbb;
}

.info:hover {
  background-color: #191919;
}
.active {
  background-color: #000;
}
</style>